<template>
  <el-dialog
    top="8vh"
    :fullscreen="isFullscreen"
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :width="popupWidth"
    :close-on-click-modal="false"
    :append-to-body="true"
    :modal-append-to-body="false"
    @close="handleCancel('form')"
  >
    <slot>
      <p>弹框自定义的内容</p>
    </slot>
    <span v-if="isShowBtn" slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleCancel('form')">取 消</el-button>
      <el-button
        size="small"
        type="primary"
        @click="handleSubmit('form')"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'Popup',
  props: {
    dialogTitle: {
      type: String,
      default: '标题'
    },
    visible: {
      type: Boolean,
      default: false
    },
    popupWidth: {
      type: String,
      default: '550px'
    },
    isFullscreen: {
      type: Boolean,
      default: false
    },
    isShowBtn: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set() {}
    }
  },
  methods: {
    handleSubmit(formName) {
      this.$parent.handleSave(formName)
    },

    handleCancel(formName) {
      this.$emit('grandsonValue', false)

      if (this.isShowBtn) {
        this.$parent.handleClose(formName)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 8px;

  .el-dialog__header {
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #f6f7f9;
    box-sizing: border-box;
    padding: 0 32px;

    .el-dialog__title {
      font-size: 18px;
      color: #252d3d;
    }
  }

  .el-dialog__close.el-icon.el-icon-close {
    font-size: 20px;
    width: 17px;
    height: 17px;
  }

  .el-button.el-button--default {
    width: 88px;
    color: #1182fb;
    border: 1px solid #1182fb;
  }

  .el-button.el-button--primary {
    width: 88px;
  }

  .el-dialog__body {
    padding: 20px 32px;
    box-sizing: border-box;
  }

  .el-dialog__footer {
    text-align: center;
  }
}
</style>
